今日我們將踏入這個專案最具挑戰性的階段。然而，在開始之前，大概可以想像就是一個卡片作答之後的重新排序。我們拆解工作流程大約是以下。首先，我們會進行初步的作答。接著，我們會評估答案的正確性。如果答案是正確的，我們將維持現狀；反之，我們將進行重新排序，並在這個過程中展示一個引人注目的排序動畫。

開發前的準備

實作 list shuffle 功能。

Vue 3 實作代碼

<template>
  <button @click="shuffleItems">Shuffle Items</button>
  <transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </transition-group>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([
  { id: 1, text: 'Item 1' },
  { id: 2, text: 'Item 2' },
  { id: 3, text: 'Item 3' },
]);

function shuffleItems() {
  items.value = [...items.value].sort(() => Math.random() - 0.5);
}
</script>

<style>
.list-move {
  transition: transform 1s;
}
</style>

遊戲流程

流程圖文字描述：

開始
進行初步作答
評估答案是否正確
是：維持現狀，流程結束
不是：進行重新排序**(展示排序動畫)**
結束

想法示意圖

實作與測試

製作效果 DEMO

• opacity 版本
• transform 版本

opacity 版本

transform 版本

實際測試動畫功能

• 進行 DOM 操作以調整位置。
• 開啟和關閉 transition 設定，以達到最佳的使用者體驗。
  說明：為什麼要做開啟或關閉 transition 設定，因為如果都使用 transition 那作答拖拉動時就會產生過度的效果，反而看起來操作起來不是很順暢。

明天我們再深入程式碼的核心，並專注於進行精細的優化，以達到更高的性能和使用者體驗。是一個值得思考如何實作，比較不同做法和改進的過程。

參考資料

Animation Techniques